<template>
	<div>
		<el-row :gutter="24" v-if="!detailShow">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择年份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryYear" size="small" style="width:100%;margin-left:5px;" type="year" clearable placeholder="选择年份">
				</el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<el-button type="primary" size="small" @click="query">查询</el-button>
			</el-col>
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" v-on:click="processOut">导出</el-button>
				<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
			</el-col>
		</el-row>
		<el-row v-if="!detailShow">

			<table class="report_table" id="carback" cellspacing="0" cellpadding="0" width="100%">
				<!--表格开始-->
				<tbody>
					<tr class="texttbody" height="60px;">
						<th scope="col">公司</th>
						<th scope="col">年份</th>
						<th scope="col">维度</th>
						<th scope="col">一月</th>
						<th scope="col">二月</th>
						<th scope="col">三月</th>
						<th scope="col">四月</th>
						<th scope="col">五月</th>
						<th scope="col">六月</th>
						<th scope="col">七月</th>
						<th scope="col">八月</th>
						<th scope="col">九月</th>
						<th scope="col">十月</th>
						<th scope="col">十一月</th>
						<th scope="col">十二月</th>
					</tr>
					<tr v-for="item in tableData">
						<td>{{item.oName}}</td>
						<td>{{item.countYear}}</td>
						<td>{{item.countTag}}</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.one!=null">
								<el-button type="text" @click="lookdetail(item,'one')">{{item.one}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.one==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.one== null?'0.00%':item.one}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.two!=null">
								<el-button type="text" @click="lookdetail(item,'two')">{{item.two}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.two==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.two== null?'0.00%':item.two}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.three!=null">
								<el-button type="text" @click="lookdetail(item,'three')">{{item.three}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.three==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.three== null?'0.00%':item.three}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.four!=null">
								<el-button type="text" @click="lookdetail(item,'four')">{{item.four}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.four==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.four== null?'0.00%':item.four}}
							</div>
						</td>

						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.five!=null">
								<el-button type="text" @click="lookdetail(item,'five')">{{item.five}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.five==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.five== null?'0.00%':item.five}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.six!=null">
								<el-button type="text" @click="lookdetail(item,'six')">{{item.six}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.six==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.six== null?'0.00%':item.six}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.seven!=null">
								<el-button type="text" @click="lookdetail(item,'seven')">{{item.seven}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.seven==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.seven== null?'0.00%':item.seven}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.eight!=null">
								<el-button type="text" @click="lookdetail(item,'eight')">{{item.eight}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.eight==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.eight== null?'0.00%':item.eight}}
							</div>
						</td>

						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.nine!=null">
								<el-button type="text" @click="lookdetail(item,'nine')">{{item.nine}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.nine==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.nine== null?'0.00%':item.nine}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.ten!=null">
								<el-button type="text" @click="lookdetail(item,'ten')">{{item.ten}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.ten==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.ten== null?'0.00%':item.ten}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.eleven!=null">
								<el-button type="text" @click="lookdetail(item,'eleven')">{{item.eleven}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.eleven==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.eleven== null?'0.00%':item.eleven}}
							</div>
						</td>
						<td>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.twelve!=null">
								<el-button type="text" @click="lookdetail(item,'twelve')">{{item.twelve}}</el-button>
							</div>
							<div v-if="item.countTag != '到店率'&&item.countTag != '合计到店率'&&item.twelve==null">
								{{0}}
							</div>
							<div v-if="item.countTag == '到店率'||item.countTag == '合计到店率'">
								{{item.twelve== null?'0.00%':item.twelve}}
							</div>
						</td>

					</tr>

				</tbody>
			</table>

		</el-row>
		<el-row :gutter="24" v-if="detailShow">
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" @click="back">返回</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="detailShow">
			<el-table :data="detailData.dataList" border style="width: 100%;align-content: center;">
				<el-table-column label="车主姓名" prop="ownerName">
				</el-table-column>
				<el-table-column label="车主电话" prop="ownerTel">
				</el-table-column>
				<el-table-column label="品牌" prop="brand">
				</el-table-column>
				<el-table-column label="车系" prop="series">
				</el-table-column>
				<el-table-column label="车型" prop="model">
				</el-table-column>
				<el-table-column label="车架号" prop="vin">
				</el-table-column>
				<el-table-column label="车牌号" prop="plateNum">
				</el-table-column>
				<el-table-column label="车龄" prop="carAge">
				</el-table-column>
				<el-table-column label="行驶里程" prop="runMile">
				</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
			</el-pagination>
		</el-row>
		<el-dialog title="报表说明" v-model="reportShow" size="small">
			<div>
				<b style="font-size: 15px;">事故车保养回站率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">评测期内进站常规保养的基盘客户数量÷基盘客户（即考核期前第12个月进站事故维修的客户）数量×100%</b><br><br>
			</div>
			<div>
				<table class="report_table" cellspacing="0" cellpadding="0" width="100%">
					<tbody>
						<tr>
							<td>考核期</td>
							<td>2017.1</td>
							<td>2017.2</td>
							<td>2017.3</td>
							<td>2017.4</td>
							<td>2017.5</td>
							<td>2017.6</td>
						</tr>
						<tr>
							<td>评测期</td>
							<td>2016.2-2017.1</td>
							<td>2016.3-2017.2</td>
							<td>2016.4-2017.3</td>
							<td>2016.5-2017.4</td>
							<td>2016.6-2017.5</td>
							<td>2016.7-2017.6</td>
						</tr>
						<tr>
							<td>基盘客户</td>
							<td>2016.1</td>
							<td>2016.2</td>
							<td>2016.3</td>
							<td>2016.4</td>
							<td>2016.5</td>
							<td>2016.6</td>
						</tr>
						<tr>
							<td>考核期</td>
							<td>2017.7</td>
							<td>2017.8</td>
							<td>2017.9</td>
							<td>2017.10</td>
							<td>2017.11</td>
							<td>2017.12</td>
						</tr>
						<tr>
							<td>评测期</td>
							<td>2016.8-2017.7</td>
							<td>2016.9-2017.8</td>
							<td>2016.10-2017.9</td>
							<td>2016.11-2017.10</td>
							<td>2016.12-2017.11</td>
							<td>2017.1-2017.12</td>
						</tr>
						<tr>
							<td>基盘客户</td>
							<td>2016.7</td>
							<td>2016.8</td>
							<td>2016.9</td>
							<td>2016.10</td>
							<td>2016.11</td>
							<td>2016.12</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-dialog>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	</div>
</template>

<script>
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				CurentPages: 1,
				page: this.page,
				//baobiao shuoming
				reportShow: false,
				queryYear: '',
				tableData: [],
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "事故车回店率.xls",
				//Mingxi
				detailShow: false,
				detailQueryData: {
					type: '',
					year: '',
					month: '',
				},
				detailData: {
					total: 0,
					dataList: []
				},
			}
		},
		methods: {
			//返回
			back: function() {
				this.$data.detailShow = false;
				this.$data.CurentPages = 1;
				this.$data.detailData.dataList = [];
				this.$data.detailData.total = 0;
			},
			detatilQuery: function() {
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/carback/detail', //url
					params: { //发送的参数
						companyId: this.$data.detailQueryData.companyId,
						year: this.$data.detailQueryData.year,
						month: this.$data.detailQueryData.month,
						type: this.$data.detailQueryData.type,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})
			},
			//查看明细
			lookdetail: function(item, num) {
				this.$data.detailShow = true;
				debugger;
				if(item.countTag != "到店数" && item.countTag != "到店率" && item.countTag != "合计到店数" && item.countTag != "合计到店率") {
					this.$data.detailQueryData.type = "car";
				}
				if(item.countTag == "到店数" || item.countTag == "合计到店数") {
					this.$data.detailQueryData.type = "back";
				}
				this.$data.detailQueryData.year = item.countYear;
				this.$data.detailQueryData.month = num;
				this.$data.detailQueryData.companyId = item.companyId;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/carback/detail', //url
					params: { //发送的参数
						companyId: this.$data.detailQueryData.companyId,
						year: this.$data.detailQueryData.year,
						month: this.$data.detailQueryData.month,
						type: this.$data.detailQueryData.type,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})

			},
			//daochu 
			processOut: function() {
				this.$data.tableId = "carback";
				this.$data.template = "<template><div><table border='1'>{table}</table></div></template>";
			},
			//daochu fanhuihanshu
			backFunction: function() {
				this.$data.tableId = "";
			},
			//查看报表说明
			lookReport: function() {
				this.$data.reportShow = true;
			},
			//查询
			query: function() {
				debugger;
				if(this.$data.queryYear) {
					this.$data.queryYear = this.moment(this.$data.queryYear).format("YYYY");
				}
				if(this.$data.companyId == '') {
					this.$message.error("请选择公司！")
				} else {
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/kpi/carback', //url
						params: { //发送的参数
							yDate: this.$data.queryYear,
							companyId: this.$data.companyId,
							area: this.$data.area,
							brand: this.$data.brand,
						}
					}).then(function(resp) {
						this.$data.tableData = resp.data;
						for(var i = 0; i < this.$data.tableData.length; i++) {
							if(this.$data.tableData[i].countTag == '事故车数') {
								this.$data.tableData[i].countTag = this.$data.tableData[i].baseYear + this.$data.tableData[i].countTag;
							}
						}
						debugger;
						var len = this.$data.tableData.length;
						if(this.$data.tableData[len - 3].one == null) {
							this.$data.tableData[len - 1].one = '0.00%';
						} else {
							this.$data.tableData[len - 1].one = (this.$data.tableData[len - 2].one / this.$data.tableData[len - 3].one * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].two == null) {
							this.$data.tableData[len - 1].two = '0.00%';
						} else {
							this.$data.tableData[len - 1].two = (this.$data.tableData[len - 2].two / this.$data.tableData[len - 3].two * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].three == null) {
							this.$data.tableData[len - 1].three = '0.00%';
						} else {
							this.$data.tableData[len - 1].three = (this.$data.tableData[len - 2].three / this.$data.tableData[len - 3].three * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].four == null) {
							this.$data.tableData[len - 1].four = '0.00%';
						} else {
							this.$data.tableData[len - 1].four = (this.$data.tableData[len - 2].four / this.$data.tableData[len - 3].four * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].five == null) {
							this.$data.tableData[len - 1].five = '0.00%';
						} else {
							this.$data.tableData[len - 1].five = (this.$data.tableData[len - 2].five / this.$data.tableData[len - 3].five * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].six == null) {
							this.$data.tableData[len - 1].six = '0.00%';
						} else {
							this.$data.tableData[len - 1].six = (this.$data.tableData[len - 2].six / this.$data.tableData[len - 3].six * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].seven == null) {
							this.$data.tableData[len - 1].seven = '0.00%';
						} else {
							this.$data.tableData[len - 1].seven = (this.$data.tableData[len - 2].seven / this.$data.tableData[len - 3].seven * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].eight == null) {
							this.$data.tableData[len - 1].eight = '0.00%';
						} else {
							this.$data.tableData[len - 1].eight = (this.$data.tableData[len - 2].eight / this.$data.tableData[len - 3].eight * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].nine == null) {
							this.$data.tableData[len - 1].nine = '0.00%';
						} else {
							this.$data.tableData[len - 1].nine = (this.$data.tableData[len - 2].nine / this.$data.tableData[len - 3].nine * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].ten == null) {
							this.$data.tableData[len - 1].ten = '0.00%';
						} else {
							this.$data.tableData[len - 1].ten = (this.$data.tableData[len - 2].ten / this.$data.tableData[len - 3].ten * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].eleven == null) {
							this.$data.tableData[len - 1].eleven = '0.00%';
						} else {
							this.$data.tableData[len - 1].eleven = (this.$data.tableData[len - 2].eleven / this.$data.tableData[len - 3].eleven * 100).toFixed(2) + '%';
						}
						if(this.$data.tableData[len - 3].twelve == null) {
							this.$data.tableData[len - 1].twelve = '0.00%';
						} else {
							this.$data.tableData[len - 1].twelve = (this.$data.tableData[len - 2].twelve / this.$data.tableData[len - 3].twelve * 100).toFixed(2) + '%';
						}
					}, function(error) {
						// error
					})

				}

			},
			handleSizeChanges: function() {

			},
			//baoxiandan fenye
			handleCurrentChanges: function(currentPage) {
				this.$data.CurentPages = currentPage;
				this.detatilQuery();
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
		},
		//表单创建时执行
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
		},
		components: {
			exports
		}
	}
</script>

<style>

</style>